<template>
  <view>
    <template v-for="(item, index) in props.list" :key="setKey(item.id, index)">
      <Item :item="item" @like="(id) => operatLike(id, index)" @infoback="userInfoBack($event,item.id)" @longpressback="longpressBack">
        <view v-for="t in item.childVideoComments" :key="t.id">
          <Item :item="t" :isSecond="true" :areviewerId="t.areviewerId" @infoback="userInfoBack($event,t.parentId)" @longpressback="longpressBack"></Item>
        </view>
        <view style="padding-left: 70rpx; margin-top: 12rpx; color: #204070" v-show="item.childIsMore || showRecover(item)" @click.stop="requestMore(item, index)">
          {{showRecover(item) ? '收起' : '展开更多'}}
          <uni-icons :type="showRecover(item) ? 'top' : 'bottom'" size="14" color="#204070"></uni-icons>
        </view>
      </Item>
    </template>
    <view class="no-data u-center" v-if="list?.length === 0">
      <view class="line"></view>
      <view>还没有评论，快来发布第一条吧</view>
      <view class="line"></view>
    </view>
    <view class="no-more u-center" v-else-if="isMore === false">
      <view class="line"></view>
      <view>没有更多了</view>
      <view class="line"></view>
    </view>
  </view>

  <uni-popup class="the-popup" ref="operatePanelRef" background-color="#fff" type="bottom">
    <view class="popup-content">
      <view class="popup-btn popup-delete" @click="deleteById">删除</view>
      <view class="popup-btn popup-close" @click="closePopup">取消</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, getCurrentInstance } from 'vue'
import Item from './item.vue'
import { useStore } from '@/store'
const { $https } = getCurrentInstance().appContext.config.globalProperties
const store = useStore()
const props = defineProps({
  list: {
    type: Array,
    default: () => []
  },
  contentInfo: {
    type: Object,
    default: () => ({})
  },
  isMore: {
    type: Boolean,
    default: null
  },
  childIsMore: {
    type: Boolean,
    default: null
  }
})
const emit = defineEmits(['reload', 'like', 'infoback', 'deleteback'])
const showRecover = (item) => {
  if (item.totalRecord) {
    return item.totalRecord === item.childVideoComments.length
  } else {
    return false
  }
}
const requestMore = (item, index) => {
  item.currentPage = item.currentPage || 1
  emit('reload', item, index)
}
const operatLike = (id, index) => {
  emit('like', id, index)
}
const setKey = (id, index) => {
  return id + '_' + index
}
// {id:props.item.areviewerId, name:props.item.areviewerName, commentLevel:2, parentId:item.id}
const userInfoBack = (info, parentId) => {
  if (parentId) {
    const res = {
      parentId: parentId, // 评论的父级id
      userId: info.areviewerId, // 回复对象id
      userName: info.areviewerName, // 回复对象name
      commentLevel: info.commentLevel
    }
    emit('infoback', res)
  } else {
    const res = {
      parentId: parentId, // 评论的父级id
      commentLevel: info.commentLevel
    }
    emit('infoback', res)
  }
}
const operatePanelRef = ref()
const operatePanel = ref({
  id: null
})
const longpressBack = (info) => {
  const canDelete = store.state?.profile?.attr.customerId === props.contentInfo.customerId || info.areviewerId === store.state?.profile?.attr.customerId
  if (canDelete) {
    operatePanel.value.id = info.id
    operatePanelRef.value.open()
  }
}
const closePopup = () => {
  operatePanel.value.id = null
  operatePanelRef.value.close()
}
const deleteById = () => {
  if (!operatePanel.value.id) {
    uni.showToast({
      title: '删除失败',
      icon: 'none'
    })
  } else {
    $https({
      url: `/video-comment/deleted/${operatePanel.value.id}`,
      type: '',
      method: 'delete'
    }).then(res => {
      if (res.code === 0) {
        emit('deleteback')
        uni.showToast({
          title: '评论已删除',
          icon: 'none'
        })
      }
    })
  }
  closePopup()
}
</script>

<style scoped lang="scss">
.no-more,.no-data{
  color: #999999;
  font-size: 22rpx;
  line-height: 22rpx;
  margin-top: 42rpx;
  .line{
    width: 24rpx;
    height: 1rpx;
    background: #999999;
    margin: 0 16rpx;
  }
}
.popup-content{
  padding: 24rpx;
  .popup-btn{
    line-height: 68rpx;
    height: rpx;
    text-align: center;
  }
  .popup-delete{
    color: rgb(255, 41, 41);
    padding: 12rpx 0;
  }
  .popup-close{
    padding: 12rpx 0;
    border-top: 1px solid rgb(214, 214, 214);
  }
}
</style>
